<template>
	<view class="container">
		<navbar bg-color="#E72A2A" :title="showType == 1 ? '服务' : showType == 2 ? '课程' : '商城'" color="#ffffff">
			<view class="left-icon" slot="leftIcon" style="position: absolute">
				<view class="logo">
					<image :src="logo" mode="aspectFit" />
				</view>
			</view>
		</navbar>
		<view class="" style="padding: 20rpx 22rpx 24rpx;background-color: #e72a2a;">
			<view class="header" @click="gotoSearch">
				<headerSearch class="search-box" bgColor="#ffffff" @leftSlotClick="citySelect">
					<view class="left" style="padding-left: 28rpx;" slot="left" @click.stop="citySelect">
						<text>{{ city.name || '郑州市' }}</text>
						<image :src="$img_path('/course/select.png')" mode="widthFix"></image>
					</view>
				</headerSearch>
			</view>
			<!-- <view class="msg">
				<image :src="$img_path('/course/index/1.png')" mode="widthFix"></image>
			</view> -->
		</view>

		<view class="content">
			<view class="top">
				<view class="t-text">
					您需要什么{{ showType == 1 ? "服务" : showType == 2 ? "课程" : "商品" }}？
				</view>
				<view class="service" v-if="false">
					<view class="item" :class="{ 'item-M-style': showType === 1 }"
						@click="toModel('/pages/index/index', 1)">
						<image :src="$img_path('/course/index/2.png')" mode="widthFix"></image>
					</view>
					<view class="item" :class="{ 'item-M-style': showType === 3 }"
						@click="toModel('/pagesMall/index/index', 3)">
						<image :src="$img_path('/course/index/3.png')" mode="widthFix"></image>
					</view>
					<view class="item" :class="{ 'item-M-style': showType === 2 }"
						@click="toModel('/pagesCourse/index/index', 2)">
						<image :src="$img_path('/course/index/4.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view v-show="showType === 1">
				<view class="bg-box box-1" v-if="nav_8.length > 0">
					<view class="bg-con-box">
						<view class="item" v-for="(item, i) in nav_8" :key="item.id" @click="toList(item)">
							<image :src="item ? $img_base_url(item.thumb_image) : ''" mode="aspectFill"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
				<view class="bg-box box-1" v-if="nav_10.length > 0">
					<view class="bg-con-box box-M-style">
						<view class="item" v-for="(item, i) in nav_10" :key="item.id" @click="toList(item)"
							style="width: 104rpx; margin-right: 38rpx; margin-bottom: 20rpx">
							<image style="width: 80rpx" :src="item ? $img_base_url(item.thumb_image) : ''"
								mode="aspectFill"></image>
							<text style="font-size: 26rpx">{{ item.name }}</text>
						</view>
					</view>
				</view>
				<view class="Notice" @click="makePhone">
					<image :src="$img_path('/course/index/16.png')" mode="widthFix"></image>
					<view class="text"> 服务电话：{{ phone }} </view>
				</view>
				<!-- 服务块 -->

				<!-- 服务 - 热门服务 -->
				<view class="bg-box box-3 hot-box">
					<view class="title">
						<view class="left">
							<text>热门服务</text>
						</view>
						<view class="right">
							<text>查看全部</text>
							<image :src="$img_path('/course/index/icon_r.png')" mode="widthFix"></image>
						</view>
					</view>
					<!-- 广告-热门服务 -->
					<view class="M-style-1" v-if="showAd && Ads[0].ads">
						<view v-for="(item, index) in hotService.ads" :key="index" class="item" :class="{
                'grid-item-1': [1, 2, 3].includes(index),
                'grid-item-2': [5, 6, 7].includes(index),
                'grid-item-3': [9, 10, 11].includes(index),
              }">
							<image v-if="index % 4 === 0" class="M-1-img" :src="`${BASE_URL}${item.thumb_image}`"
								mode="aspectFill" />
							<view class="content" v-else>
								<image class="M-2-img" :src="`${BASE_URL}${item.thumb_image}`" mode="aspectFill" />
								<view class="text">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="swiper_1 swiper-box" v-if="Ads && Ads[0] && Ads[0].ads.length > 0">
					<swiper :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item, i) in Ads[0].ads" :key="i">
							<view class="swiper-item">
								<image :src="$img_base_url(item.thumb_image)" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 服务 - 积分活动 -->
				<view class="activity-box">
					<view class="activity-banner" v-if="Ads && Ads[1] && Ads[1].ads.length > 0">
						<image :src="$img_base_url(Ads[1].ads[0].thumb_image)" mode="aspectFill"></image>
					</view>
					<view class="activity-banner" v-if="Ads && Ads[2] && Ads[2].ads.length > 0">
						<image :src="$img_base_url(Ads[2].ads[0].thumb_image)" mode="aspectFill"></image>
					</view>
				</view>

				<view class="bg-box box-3">
					<view class="title">
						<view class="left">
							<text>标题名称</text>
						</view>
						<view class="right">
							<text>查看全部</text>
							<image :src="$img_path('/course/index/icon_r.png')" mode="aspectFill"></image>
						</view>
					</view>
					<view class="guanggao-box">
						<view class="guanggao-item" v-if="Ads && Ads[3] && Ads[3].ads.length > 0">
							<image :src="$img_base_url(Ads[3].ads[0].thumb_image)" mode="aspectFill"></image>
						</view>
						<view class="guanggao-item" v-if="Ads && Ads[4] && Ads[4].ads.length > 0">
							<image :src="$img_base_url(Ads[4].ads[0].thumb_image)" mode="aspectFill"></image>
						</view>
						<view class="guanggao-item" v-if="Ads && Ads[5] && Ads[5].ads.length > 0">
							<image :src="$img_base_url(Ads[5].ads[0].thumb_image)" mode="aspectFill"></image>
						</view>
						<view class="guanggao-item" v-if="Ads && Ads[6] && Ads[6].ads.length > 0">
							<image :src="$img_base_url(Ads[6].ads[0].thumb_image)" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- 积分活动 -->
				<view class="activity-box">
					<view class="activity-banner" v-if="Ads && Ads[7] && Ads[7].ads.length > 0">
						<image :src="$img_base_url(Ads[7].ads[0].thumb_image)" mode="aspectFill"></image>
					</view>
					<view class="activity-banner" v-if="Ads && Ads[8] && Ads[8].ads.length > 0">
						<image :src="$img_base_url(Ads[8].ads[0].thumb_image)" mode="aspectFill"></image>
					</view>
				</view>
				<view class="bg-box box-3">
					<image class="bg-img" :src="$img_path('/course/index/bg2.png')" mode="widthFix"></image>
					<view class="title">
						<view class="left">
							<image :src="$img_path('/course/index/15.png')" mode="widthFix"></image>
							<text>优惠券</text>
						</view>
						<view class="right" @click="goCoupon()">
							<text>更多</text>
							<image :src="$img_path('/course/index/icon_r.png')" mode="widthFix"></image>
						</view>
					</view>

					<view class="coupon">
						<view class="c-box">
							<view class="item" v-for="item in 4">
								<image :src="$img_path('/course/index/c.png')" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="t-img">
						<view class="i" v-if="Ads && Ads[9] && Ads[9].ads.length > 0">
							<image :src="$img_base_url(Ads[9].ads[0].thumb_image)" mode="aspectFill"></image>
						</view>
						<view class="i" v-if="Ads && Ads[10] && Ads[10].ads.length > 0">
							<image :src="$img_base_url(Ads[10].ads[0].thumb_image)" mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<!-- 服务 - 首页模块一 -->
				<view class="list-box bg-box p-20" v-if="moduleInfo && moduleInfo[0]">
					<view class="title">
						{{ moduleInfo[0].name }}
					</view>
					<view class="item" style="margin-top: 20rpx" v-for="(item, i) in moduleInfo[0].goods" :key="i">
						<home-goods-box :goods="item"></home-goods-box>
					</view>
				</view>
				<!-- 服务 - 首页模块二 -->
				<view class="list-box row-list bg-box" v-if="moduleInfo && moduleInfo[1]">
					<view class="title">
						{{ moduleInfo[1].name }}
					</view>
					<view class="item" style="margin-top: 20rpx" v-for="(item, i) in moduleInfo[1].goods" :key="i">
						<!-- <goodsBox :styleType="1" >
						<text slot="center">1000人订阅</text>
					</goodsBox> -->
						<home-goods-box :goods="item" type="row"></home-goods-box>
					</view>
				</view>
				<!-- 服务 - 首页模块三 -->
				<view class="list-box bg-box p-20" v-if="moduleInfo && moduleInfo[2]">
					<view class="title">
						{{ moduleInfo[2].name }}
					</view>
					<view class="item" style="margin-top: 20rpx" v-for="(item, i) in moduleInfo[2].goods" :key="i">
						<home-goods-box :goods="item"></home-goods-box>
					</view>
				</view>
				<!-- 服务 - 首页模块四 -->
				<view class="list-box row-list bg-box" v-if="moduleInfo && moduleInfo[3]">
					<view class="title">
						{{ moduleInfo[3].name }}
					</view>
					<view class="item" style="margin-top: 20rpx" v-for="(item, i) in moduleInfo[3].goods" :key="i">
						<home-goods-box :goods="item" type="row"></home-goods-box>
					</view>
				</view>

				<view class="swiper_1 swiper-box" v-if="Ads && Ads[11] && Ads[11].ads.length > 0">
					<swiper :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item, i) in Ads[11].ads" :key="i">
							<view class="swiper-item">
								<image :src="$img_base_url(item.thumb_image)" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<view class="bottom-img">
					<image :src="$img_path('/course/index/bg.png')" mode="widthFix"></image>
					<image :src="$img_path('/course/index/bg.png')" mode="widthFix"></image>
				</view>
				<Tarbar index="1" page="1"></Tarbar>
			</view>

			<!-- 商城模块 -->
			<mallIndex v-show="showType === 3" :scrollTop="scrollTop3" :scrollHeight="downCount3"></mallIndex>

			<!-- 课程模块 -->
			<courseIndex v-show="showType === 2" :scrollTop="scrollTop2"></courseIndex>
		</view>

		<view class="scroll-top" v-if="s_top" @click="toTop">
			<image :src="$img_path('/course/top.png')" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from "@/utils/env.js";
	import {
		getSysConfig
	} from "@/utils/api/userApi.js";
	import {
		getNav,
		getAds,
		indexModule
	} from "@/utils/api/public.js";
	import goodsBox from "../../components/service-box/goods-box.vue";
	import headerSearch from "@/components/header-search/header-search.vue";
	import mallIndex from "@/components/ljMall.vue";
	import courseIndex from "@/components/ljCourse.vue";
	export default {
		components: {
			headerSearch,
			goodsBox,
			mallIndex,
			courseIndex,
		},

		data() {
			return {
				showType: 3, // 1:首页 2:课程 3:商城
				BASE_URL: BASE_URL,
				city: {},
				s_top: false,
				nav_8: [],
				nav_10: [],
				moduleInfo: null,
				Ads: [],
				phone: "",
				// 显示广告
				showAd: false,
				// 广告-热门服务
				hotService: [],
				logo: uni.getStorageSync("logo"),
				// 上拉刷新次数 课程
				scrollTop2: 0,
				// 上拉刷新次数 商城
				scrollTop3: 0,

				// 下拉加载次数 商城
				downCount3: 0,
			};
		},
		onPullDownRefresh() {
			uni.showToast({
				title: "刷新中...",
				icon: "none",
				mask: true,
			});
			if (this.showType == 1) {
				this.getindexModule();
			}

			if (this.showType == 2) {
				this.scrollTop2 += 1;
			}

			if (this.showType == 3) {
				this.scrollTop3 += 1;
			}

			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			console.log("到底了");
			if (this.showType == 1) {}
			if (this.showType == 2) {}
			if (this.showType == 3) {
				this.downCount3 += 1;
			}
		},
		onLoad() {
			uni.$on('updateCart', function() {
				console.log(1);
				let city = uni.getStorageSync("select_city");
				if (city) {
					setTimeout(() => {
						this.city = JSON.parse(uni.getStorageSync("select_city"));
						console.log(this.city, "this.city");
					}, 3000)
				}
			})
			this.getNavApi();
			this.getAdsApi();
			this.getindexModule();
		},
		onShow() {
			this.showType = 3;
			// this.showType = uni.getStorageSync("tarbarModule") || 3;
			this.getSysConfig();
			let city = uni.getStorageSync("select_city");
			if (city) {
				this.city = JSON.parse(uni.getStorageSync("select_city"));
				console.log(this.city, "this.city");
			}
		},
		methods: {
			// 去优惠券列表
			goCoupon() {
				console.log("去优惠券列表");
				uni.navigateTo({
					url: "/pagesMall/coupon_list/coupon_list?type=2",
				});
			},
			async getSysConfig() {
				let data = await getSysConfig({
					site: "sys_kefu",
				});
				let data1 = await getSysConfig({
					site: "sys_logo",
				});
				this.phone = data.data;
				uni.setStorageSync("logo", `${BASE_URL}${data1.data}`);
			},
			// 获取导航
			async getNavApi() {
				let nav_8 = await getNav({
					group: 1,
					type: 1,
				});
				this.nav_8 = nav_8.data;
				let nav_10 = await getNav({
					group: 2,
					type: 1,
				});
				this.nav_10 = nav_10.data;
			},

			makePhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone,
				});
			},

			// 获取广告
			async getAdsApi() {
				let adList = await getAds({
					type: 1,
				});
				this.Ads = adList.data;
				this.hotService = adList.data[0];
				this.showAd = true;
			},

			// 获取首页模块配置
			async getindexModule() {
				let module = await indexModule({
					type: 1,
				});
				// console.log(module,'-')
				this.moduleInfo = module.data;
				uni.hideLoading();
			},

			gotoSearch() {
				uni.navigateTo({
					url: "/pagesMall/search/search",
				});
			},

			toModel(url, i) {
				uni.setStorageSync("tarbarModule", i);
				if (url == "/pages/index/index") {
					this.showType = 1;
					return;
				}
				if (url == "/pagesMall/index/index") {
					this.showType = 3;
					return;
				}
				if (url == "/pagesCourse/index/index") {
					this.showType = 2;
					return;
				}
				// uni.reLaunch({
				//   url: url,
				// });
			},

			toList(data) {
				if (data.url_type == 2) {
					uni.navigateTo({
						url: data.url,
					});
				} else {}
				// uni.navigateTo({
				// 	url:'/pages/classify/classify_list'
				// })
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			gotoPage(url) {
				uni.navigateTo({
					url,
				});
			},

			citySelect() {
				uni.navigateTo({
					url: "/pagesMine/city_select/city_select",
				});
			},
		},
		onPageScroll(event) {
			if (event.scrollTop > 100) {
				this.s_top = true;
			} else {
				this.s_top = false;
			}
		},
	};
</script>

<style lang="scss" scoped>
	// @import url("./index.scss");
	@import "index.scss";

	.M-style-1 {
		display: grid;
		grid-template-columns: 2fr repeat(3, 1fr);
		grid-gap: 20rpx 14rpx;
		margin-top: 22rpx;

		.item {
			height: 128rpx;
			border-radius: 14rpx;

			.M-1-img {
				width: 100%;
				height: 100%;
			}
		}

		.grid-item-1 {
			background: #fff1e4;
			color: #ff7f00;
		}

		.grid-item-2 {
			background: #fff0e9;
			color: #fb664e;
		}

		.grid-item-3 {
			background: #e9f6fe;
			color: #39a8fa;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 100%;
			padding: 0;

			.M-2-img {
				width: 36rpx;
				height: 36rpx;
			}

			.text {
				margin-top: 12rpx;
			}
		}
	}

	.logo {
		image {
			width: 54rpx;
			height: 54rpx;
		}
	}
</style>